import React, { Component } from "react";
import { Table, Icon, Button } from "antd";
import moment from "moment";
import "antd/dist/antd.css";
import "./style.scss";
import IndexCardGroup from "../index-card-group";
import LineChart from "../line-chart";
import BarChart from "../bar-chart";
import HeaderBar from "./components/header-bar/index";

const { Column } = Table;

const ICON_BY_PLATFORM = {
  "-1": <span>Unknown</span>,
  "0": (
    <span>
      <Icon type="android" /> | <Icon type="apple" />
    </span>
  ),
  "1": (
    <span>
      <Icon type="android" />
    </span>
  ),
  "2": (
    <span>
      <Icon type="apple" />
    </span>
  )
};

// 1-冷启动 2-热启动
const LAUNCH_TYPE = {
  "0": "未定义",
  "1": "冷启动",
  "2": "热启动"
};

// 1-原生启动 2-WAP启动
const PAGE_ANALYSIS_TYPE = {
  "0": "未定义",
  "1": "原生加载",
  "2": "WAP加载"
};

const CARSH_TYPE = {
  "0": "全部崩溃",
  "1": "JAVA崩溃",
  "2": "Native崩溃"
};

class ListPage extends Component {
  render() {
    const { filterConditions, tasks, updateFilterConditions, fetchTasks, fetchTrendData, loading, type, trendData, trendConfig, versionOptions } = this.props;

    let pagination = {
      defaultPageSize: tasks.pageSize,
      total: tasks.total,
      showSizeChanger: true, // 显示每页显示条数切换器
      showQuickJumper: true, // 显示快速跳转输入框
      onChange: this.handlePageChange
    };

    return (
      <div className={"listpage-container"}>

        <HeaderBar
          filterConditions={filterConditions}
          updateFilterConditions={updateFilterConditions}
          fetchTasks={fetchTasks}
          fetchTrendData={fetchTrendData}
          type={type}
          versionOptions={versionOptions}
        />
        {/* <h1>测试</h1> */}
        <div className={"trend-chart"}>
          {/* <h1>测试</h1> */}
          <div className={"overview-detail-trend"}>
            {
              (() => {
                if (type === "lag" || type === "network" || type === "exception" || type === "oom" || type === "crash") {
                  return this.renderTrendChart(trendData, trendConfig);
                } else if (type === "launch" || type === "page-analysis") {
                  return this.renderBarChart(trendData, trendConfig);
                }
              })()
            }
          </div>
        </div>
        {/* <h1>测试</h1> */}
        <div className={"table-container"}>
          {
            (() => {
              if (type === "native") {
                return this.renderNativeColumns(tasks.data, loading, pagination);
              } else if (type === "web") {
                return this.renderWebColumns(tasks.data, loading, pagination);
              } else if (type === "lag") {
                return this.renderLagColumns(tasks.data, loading, pagination);
              } else if (type === "exception") {
                return this.renderExceptionColumns(tasks.data, loading, pagination);
              } else if (type === "oom") {
                return this.renderOomColumns(tasks.data, loading, pagination);
              } else if (type === "launch") {
                return this.renderLaunchColumns(tasks.data, loading, pagination);
              } else if (type === "page-analysis") {
                return this.renderPageAnalysisColumns(tasks.data, loading, pagination);
              } else if (type === "crash") {
                return this.renderCrashColumns(tasks.data, loading, pagination);
              } else if (type === "network") {
                return this.renderNetworkColumns(tasks.data, loading, pagination);
              } else if (type === "memory") {
                return this.renderMemoryColumns(tasks.data, loading, pagination);
              }
            })()
          }
        </div>
      </div>
    );
  }

  renderNativeColumns = (tasks, loading, pagination) => {
    // console.log(tasks, "表格数据");
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey="taskIds">
        <Column title="任务id" dataIndex="taskId" key="taskId" width="10%" />
        <Column title="AppId" dataIndex="appId" key="appId" width="10%" />
        <Column title="AppVersion" dataIndex="appVersion" key="appVersion" width="10%" />
        <Column title="设备标识" dataIndex="deviceId" key="deviceId" width="15%" render={(text, record) => (
          <span onClick={() => console.log("点击单条数据", record.deviceId)}>
            {text}
          </span>
        )} />
        <Column title="unionId" dataIndex="unionId" key="unionId" width="15%" />
        <Column title="设备平台" dataIndex="platform" key="platform" width="10%" render={this.renderColumnPlatform} />
        <Column title="日志当天时间" dataIndex="logDate" key="logDate" width="10%" render={this.renderColumnLogDate} />
        <Column title="日志上报时间" dataIndex="addTime" key="addTime" width="10%" render={this.renderColumnAddTime} />
        <Column title="操作" dataIndex="action" width="10%" render={this.renderColumnAction} />
      </Table>

    );
  };

  renderWebColumns = (tasks, loading) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={false} scroll={{ y: 850 }} rowKey="taskIds">
        <Column title="设备标识" dataIndex="deviceId" key="deviceId" width="30%" />
        <Column title="日志来源" dataIndex="webSource" key="webSource" width="15%" render={this.renderColumnWebSource} />
        <Column title="环境信息" dataIndex="environment" key="environment" width="15%" render={this.renderColumnEnvironment} />
        <Column title="日志当天时间" dataIndex="logDate" key="logDate" width="10%" render={this.renderColumnLogDate} />
        <Column title="日志上报时间" dataIndex="addTime" key="addTime" width="10%" render={this.renderColumnAddTime} />
        <Column title="操作" dataIndex="action" width="10%" render={this.renderColumnAction} />
      </Table>
    );
  };

  // 奔溃列表
  renderCrashColumns = (tasks, loading, pagination) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="5%" render={this.renderColumnPlatform} />
        <Column title="错误摘要" dataIndex="message" key="message" width="20%" />
        <Column title="最近一次时间" dataIndex="maxReportTime" key="maxReportTime" width="10%" render={this.renderColumnAddTime} />
        <Column title="错误类型" dataIndex="bizType" key="bizType" width="8%" render={this.renderColumnCarshType} />
        <Column title="APP版本" dataIndex="version" key="version" width="8%" />
        <Column title="崩溃次数" dataIndex="errorCount" key="errorCount" width="8%" />
        <Column title="崩溃用户数" dataIndex="errorCount" key="errorUsers" width="8%" />
        <Column title="错误ID" dataIndex="errorId" key="errorId" width="12%" />
        <Column title="操作" dataIndex="action" width="10%" render={this.renderColumnAction} />
      </Table>
    );
  };

  // 卡顿列表
  renderLagColumns = (tasks, loading, pagination) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="8%" render={this.renderColumnPlatform} />
        <Column title="错误摘要" dataIndex="message" key="message" width="20%" />
        <Column title="最近一次时间" dataIndex="maxReportTime" key="maxReportTime" width="10%" render={this.renderColumnAddTime} />
        <Column title="错误类型" dataIndex="bizType" key="bizType" width="8%" />
        <Column title="APP版本" dataIndex="version" key="version" width="8%" />
        <Column title="卡顿次数" dataIndex="errorCount" key="errorCount" width="8%" />
        <Column title="卡顿用户数" dataIndex="errorCount" key="errorUsers" width="8%" />
        <Column title="错误ID" dataIndex="errorId" key="errorId" width="12%" />
        <Column title="操作" dataIndex="action" width="10%" render={this.renderColumnAction} />
      </Table>
    );
  };

  // 异常列表
  renderExceptionColumns = (tasks, loading, pagination) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="8%" render={this.renderColumnPlatform} />
        <Column title="错误摘要" dataIndex="message" key="message" width="20%" />
        <Column title="最近一次时间" dataIndex="maxReportTime" key="maxReportTime" width="10%" render={this.renderColumnAddTime} />
        <Column title="错误类型" dataIndex="bizType" key="bizType" width="8%" />
        <Column title="APP版本" dataIndex="version" key="version" width="8%" />
        <Column title="异常次数" dataIndex="errorCount" key="errorCount" width="8%" />
        <Column title="异常用户数" dataIndex="errorCount" key="errorUsers" width="8%" />
        <Column title="错误ID" dataIndex="errorId" key="errorId" width="12%" />
        <Column title="操作" dataIndex="action" width="10%" render={this.renderColumnAction} />
      </Table>
    );
  };

  // OOM列表
  renderOomColumns = (tasks, loading, pagination) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="8%" render={this.renderColumnPlatform} />
        <Column title="错误摘要" dataIndex="message" key="message" width="20%" />
        <Column title="最近一次时间" dataIndex="maxReportTime" key="maxReportTime" width="10%" render={this.renderColumnAddTime} />
        <Column title="错误类型" dataIndex="bizType" key="bizType" width="8%" />
        <Column title="APP版本" dataIndex="version" key="version" width="8%" />
        <Column title="OOM次数" dataIndex="errorCount" key="errorCount" width="8%" />
        <Column title="OOM用户数" dataIndex="errorCount" key="errorUsers" width="8%" />
        <Column title="错误ID" dataIndex="errorId" key="errorId" width="12%" />
        <Column title="操作" dataIndex="action" width="10%" render={this.renderColumnAction} />
      </Table>
    );
  };

  // 启动分析列表
  renderLaunchColumns = (tasks, loading, pagination) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="8%" render={this.renderColumnPlatform} />
        <Column title="启动页面" dataIndex="page" key="page" width="25%" />
        <Column title="启动类型" dataIndex="bizType" key="bizType" width="10%" render={this.renderColumnLaunchType} />
        <Column title="APP版本" dataIndex="version" key="version" width="10%" />
        <Column title="启动次数" dataIndex="launchCount" key="launchCount" width="10%" />
        <Column title="影响用户数" dataIndex="launchCount" key="usersCount" width="10%" />
        <Column title="平均启动时间" dataIndex="avgDuration" key="avgDuration" width="10%" />
        <Column title="最小启动时间" dataIndex="minDuration" key="minDuration" width="10%" />
        <Column title="最大启动时间" dataIndex="maxDuration" key="maxDuration" width="10%" />
        <Column title="最近一次启动" dataIndex="maxReportTime" key="maxReportTime" width="15%" render={this.renderColumnAddTime} />
      </Table>
    );
  };

  renderPageAnalysisColumns = (tasks, loading, pagination) => {
    console.log(tasks, "h5");
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="8%" render={this.renderColumnPlatform} />
        <Column title="页面名称" dataIndex="page" key="page" width="20%" />
        <Column title="页面类型" dataIndex="bizType" key="bizType" width="10%" render={this.renderColumnPageAnalysisType} />
        <Column title="加载次数样本量" dataIndex="launchCount" key="launchCount" width="10%" />
        {/* <Column title="慢加载率" dataIndex="launchCount" key="usersCount" width="10%" /> */}
        <Column title="平均加载时间" dataIndex="avgDuration" key="avgDuration" width="10%" sorter={(a, b) => a.avgDuration - b.avgDuration} />
        <Column title="最小加载时间" dataIndex="minDuration" key="minDuration" width="10%" />
        <Column title="最大加载时间" dataIndex="maxDuration" key="maxDuration" width="10%" />
        <Column title="操作" dataIndex="action" width="10%" render={this.renderColumnAction} />
      </Table>
    );
  };

  // 网络分析列表
  renderNetworkColumns = (tasks, loading, pagination) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="8%" render={this.renderColumnPlatform} />
        <Column title="URL" dataIndex="url" key="url" width="20%" />
        <Column title="最近一次时间" dataIndex="maxReportTime" key="maxReportTime" width="10%" render={this.renderColumnAddTime} />
        <Column title="请求次数" dataIndex="requestCount" key="requestCount" width="8%" />
        <Column title="错误率" dataIndex="errorRatio" key="errorRatio" width="8%" />
        <Column title="平均响应时间" dataIndex="avgResponseTime" key="avgResponseTime" width="8%" />
      </Table>
    );
  };

  // 内存分析列表
  renderMemoryColumns = (tasks, loading, pagination) => {
    return (
      <Table size="middle" dataSource={tasks} loading={loading} pagination={pagination} scroll={{ y: 850 }} rowKey={(record, index) => record}>
        <Column title="设备平台" dataIndex="platform" key="platform" width="8%" render={this.renderColumnPlatform} />
        <Column title="指标名称" dataIndex="title" key="title" width="10%" />
        <Column title="样本量" dataIndex="count" key="count" width="10%" />
        <Column title="平均值" dataIndex="avgMemory" key="avgMemory" width="8%" />
        <Column title="最大值" dataIndex="maxMemory" key="maxMemory" width="8%" />
        <Column title="最小值" dataIndex="minMemory" key="minMemory" width="8%" />
      </Table>
    );
  };

  renderTrendChart = (trendData, trendConfig) => {
    return (
      <div>
        <div className={"umui-index-card-group"}>
          {trendData ? <IndexCardGroup data={trendData.summary} /> : null}
        </div>
        <div className={"trend-chart"}>
          {trendData ? <LineChart data={trendData.trendChart} trendConfig={trendConfig} /> : null}
        </div>
      </div>
    );
  };

  renderBarChart = (trendData, trendConfig) => {
    // console.log(trendData);
    return (
      <div>
        <div className={"trend-chart"}>
          {trendData ? <BarChart data={trendData.trendChart} lineData={trendData.multiChart} trendConfig={trendConfig} /> : null}
        </div>
      </div>
    );
  };

  // 处理分页
  handlePageChange = (page, pageSize) => {
    const { filterConditions, fetchTasks, type } = this.props;

    this.setState(
      {
        currentPage: page,
        pageSize: pageSize,
      },
      () => {
        // console.log(this.props);
        // console.log(type, page, pageSize);
        if (type === "native" || type === "page-analysis" || type === "launch") {
          fetchTasks({
            deviceId: filterConditions.deviceId,
            platform: filterConditions.platform,
            beginTime: moment(filterConditions.beginTime).valueOf(),
            endTime: moment(filterConditions.endTime).valueOf(),
            pageNum: page,
            pageSize: pageSize,
          });
        } else {
          fetchTasks({
            deviceId: filterConditions.deviceId,
            platform: filterConditions.platform,
            beginTime: moment(filterConditions.beginTime).valueOf(),
            endTime: moment(filterConditions.endTime).valueOf(),
            pageNum: page,
            pageSize: pageSize,
          })
        }
      }
    );
  };

  renderColumnPlatform = platform => {
    return ICON_BY_PLATFORM[platform]
  };

  renderColumnLaunchType = type => {
    return LAUNCH_TYPE[type]
  };

  renderColumnPageAnalysisType = type => {
    return PAGE_ANALYSIS_TYPE[type]
  };

  renderColumnCarshType = type => {
    return CARSH_TYPE[type]
  };

  renderColumnWebSource = webSource => {
    if (webSource === null) {
      return <span>-</span>
    } else {
      return <span>{webSource}</span>
    }
  };

  renderColumnEnvironment = environment => {
    if (environment === null) {
      return <span>-</span>
    } else {
      return <span>{environment}</span>
    }
  };

  renderColumnLogDate = logDate => {
    return <div>{moment(logDate).format("YYYY-MM-DD")}</div>
  }

  renderColumnAddTime = addTime => {
    return <div>{moment(addTime).format("YYYY-MM-DD HH:mm:ss.SSS")}</div>;
  };

  renderColumnAction = (text, record, index) => {
    const { type } = this.props;
    if (type === "web") {
      return <Button onClick={this.toDetail(record.tasks)}>日志详情</Button>;
    } else {
      return <Button onClick={this.toDetail(record.taskId)}>日志详情</Button>;
    }
  };

  toDetail = tasks => () => {
    const { detailUrlPrefix } = this.props;
    this.props.history.push(`${detailUrlPrefix}?tasks=${tasks}`);
  };
}

export default ListPage;



// const list = [
//   {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }, {… }
// ]


